<template>
  <div class="invite">
    <div class="card">
      <div class="img"></div>
      <div class="uname">{{uname}}</div>
      <div class="txt1">邀请您加入</div>

      <div class="users">
        <div class="uimg" v-for="u in users"><i></i></div>

        <div class="uimg"><i></i></div>
        <span>28人</span>
      </div>

      <div class="gname">{{gname}}</div>
      <div class="line">
        <i class="icon-king icon-star"></i>
      </div>
      <div class="tips-blue">嘉宾特权</div>
      <div class="tips">
        大咖坐堂，享受特殊身份标识<br/>无须审核，自动加入
      </div>
    </div>

    <button class="btn-invite">接受邀请</button>
  </div>
</template>

<script>
  export default {
    name: 'home',
    components: {},
    data () {
      return {
        uname:'圣斗士星矢',
        users:['','','','','','','',''],
        gname:'广州吃货圈'
      }
    },
    mounted (){

    },
    methods: {}
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../assets/css/common.scss";
  .invite {position:relative;
    .card{background:#fff; width:rem(600); height:rem(800); border-radius:20px; position:fixed; top:50%; margin-top:rem(-450); left:50%; margin-left:rem(-300);
      text-align:center;
      .img{@include head(100); border:rem(2) #fff solid; box-shadow:0 0 1px $black-light; border-radius:100%; position:absolute; top:rem(-50); left:50%; margin-left:rem(-50);}
      .uname{font-size:rem(24); color:$black-dark; margin-top:rem(65); margin-bottom:rem(12);}
      .txt1{font-size:rem(24); color:$black-light; letter-spacing:rem(20); text-indent:rem(20); margin-bottom:rem(30);}

      .users{overflow:hidden; position:relative; height:rem(260); width:rem(260); margin:0 auto rem(15);
        span{color:$black-light; font-size:rem(24); position:absolute; top:50%; width:100%; text-align:center; left:0; line-height:rem(33); margin-top:rem(-16.5);}
      }

      .uimg{position:absolute;
        i{@include head(80); border-radius:100%; border:rem(2) #fff solid; }
        &:nth-child(1),&:nth-child(9){left:rem(90); top:0;}
        &:nth-child(9){width:rem(50); overflow:hidden; z-index: 8;}
        &:nth-child(2){left:rem(26); top:rem(26); z-index:7;}
        &:nth-child(3){left:0; top:rem(90); z-index:6;}
        &:nth-child(4){left:rem(26); bottom:rem(26); z-index:5;}
        &:nth-child(5){left:rem(90); bottom:0; z-index:4;}
        &:nth-child(6){right:rem(26); bottom:rem(26); z-index:3;}
        &:nth-child(7){right:0; top:rem(90); z-index:2;}
        &:nth-child(8){right:rem(26); top:rem(26); z-index:1;}
      }

      .gname{font-size:rem(36); color:$black-dark; margin-bottom:rem(40);}
      .line{@include border-half-all($border,'bottom'); width:rem(504); margin:0 auto rem(76);
        .icon-king{position:absolute; top:rem(-17); height:rem(34); background:#fff; width:rem(50); left:50%; margin-left:rem(-25); color:$border;}
      }
      .tips-blue{font-size:rem(28); color:$blue; margin-bottom:rem(24);}
      .tips{line-height:rem(40); font-size:rem(24); color:$black-light;}
    }
    .btn-invite{position:fixed; border:none; width:100%; height:rem(100); background: $blue; font-size:rem(36); color:#fff; line-height:rem(100); text-align:center; left:0; bottom:0;}
  }
</style>
